/* eslint-disable react/react-in-jsx-scope */
import Icon from '@/components/Icon'
import useInitialState from '@/hooks/useInitState'
import { changeActive, getAllChannel, getUserChannel } from '@/store/actions/home'
import { Popup, Tabs } from 'antd-mobile'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import Channels from './components/Channels/Channels'
import styles from './index.module.scss'
import ArticleList from './components/ArticleList/ArticleList'
import { useHistory } from 'react-router-dom'
const Home = () => {
  const history = useHistory()
  // 调用封装的useInitialState
  const { userChannels, active } = useInitialState(getUserChannel, 'home')
  // console.log(userChannels, 777)
  // 获取所有频道
  useInitialState(getAllChannel, 'home')

  const dispatch = useDispatch()
  // 控制状态
  const [visible, setVisible] = useState(false)
  // 控制显示隐藏
  const show = () => { setVisible(true) }
  const hide = () => { setVisible(false) }

  const onChange = (channelId:string) => {
    dispatch(changeActive(channelId))
    // console.log(channelId, 71)
  }
  return (
    <div className={styles.root}>
        {/* 频道 Tabs 列表 */}
    <Tabs className="tabs" activeKey={active} onChange={onChange} >
       {userChannels.length > 0 && userChannels.map(Item => (
         <Tabs.Tab title={Item.name} key={Item.id}>
              {/* {Item.name}的内容 */}
              <ArticleList channel_id = {Item.id} />
         </Tabs.Tab>
       ))}
    </Tabs>
        <div className="tabs-opration">
           <Icon type="iconbtn_search" onClick={() => history.push('/search')}/>
           <Icon type="iconbtn_channel" onClick={show} />
        </div>
        {/* 从左边过来 把关闭功能的方法传给子组件 */}
        <Popup position='left' visible={visible}>
           <Channels hide={hide} />
        </Popup>
    </div>
  )
}

export default Home
